<template>
  <div class="pagination-component">
    <el-pagination
      v-model:current-page="modelValue.pageIndex"
      v-model:page-size="modelValue.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="modelValue.total"
      @size-change="modelValue.handleSizeChange"
      @current-change="modelValue.handleCurrentChange"
    />
  </div>
</template>
<script  setup lang='ts'>
const props = defineProps(["modelValue"]);
</script>
<style lang='scss' scoped>
.pagination-component {
  border: 1px solid red;
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>
